<template>
  <div class="filterTabItem">
    {{ item.title }}

    <el-tag
      size="small"
      style="margin: 0 2px"
      v-for="(tag, index2) in item.value"
      :key="index2"
      closable
      @close="handleDeleteTag(index2)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted } from "vue";
const emit = defineEmits(["handleDeleteTag"]);

const state = reactive({});
function handleDeleteTag(index: number) {
  emit("handleDeleteTag", index);
}
defineProps({
  item: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.filterTabItem {
  padding: 5px;
  font-size: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: inline-block;
}
</style>
